<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>悦购</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
    <!-- 登录页面 -->
    <div id="login-page" class="page active">
        <div class="login-container">
            <h1>欢迎登录</h1>
            <form id="login-form">
                <div class="input-group">
                    <i class="fas fa-user"></i>
                    <input type="text" id="username" placeholder="用户名" required>
                </div>
                <div class="input-group">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="password" placeholder="密码" required>
                </div>
                <button type="submit" class="btn">登录</button>
            </form>
            <p class="register-link">没有账号？<a href="#" id="show-register">立即注册</a></p>
        </div>
    </div>

    <!-- 注册页面 -->
    <div id="register-page" class="page">
        <div class="login-container">
            <h1>用户注册</h1>
            <form id="register-form">
                <div class="input-group">
                    <i class="fas fa-user"></i>
                    <input type="text" id="reg-username" placeholder="用户名" required>
                </div>
                <div class="input-group">
                    <i class="fas fa-envelope"></i>
                    <input type="email" id="reg-email" placeholder="邮箱" required>
                </div>
                <div class="input-group">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="reg-password" placeholder="密码" required>
                </div>
                <div class="input-group">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="reg-confirm-password" placeholder="确认密码" required>
                </div>
                <button type="submit" class="btn">注册</button>
            </form>
            <p class="register-link">已有账号？<a href="#" id="show-login">立即登录</a></p>
        </div>
    </div>

    <!-- 主应用页面 -->
    <div id="app-page" class="page">
        <!-- 顶部导航 -->
        <header class="app-header">
            <div class="header-left">
                <span id="menu-toggle" class="menu-icon">☰</span>
                <h1 class="app-title">悦购</h1>
            </div>
            <div class="header-right">
                <span id="cart-icon" class="cart-icon">
                    <i class="fas fa-shopping-cart"></i>
                    <span id="cart-count" class="cart-count">0</span>
                </span>
            </div>
        </header>

        <!-- 侧边栏菜单 -->
        <div id="sidebar" class="sidebar">
            <div class="sidebar-header">
                <img src="./image/头像 女孩.png" alt="用户头像" class="user-avatar">
                <h3 id="sidebar-username">用户名</h3>
            </div>
            <ul class="sidebar-menu">
                <li><a href="#" class="menu-item active" data-page="home"><i class="fas fa-home"></i> 首页</a></li>
                <li><a href="#" class="menu-item" data-page="products"><i class="fas fa-shopping-bag"></i> 全部商品</a></li>
                <li><a href="#" class="menu-item" data-page="categories"><i class="fas fa-list"></i> 商品分类</a></li>
                <li><a href="#" class="menu-item" data-page="cart"><i class="fas fa-shopping-cart"></i> 购物车</a></li>
                <li><a href="#" class="menu-item" data-page="orders"><i class="fas fa-clipboard-list"></i> 我的订单</a></li>
                <li><a href="#" class="menu-item" data-page="profile"><i class="fas fa-user"></i> 个人中心</a></li>
                <li><a href="#" id="logout-btn" class="menu-item"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li>
            </ul>
        </div>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 首页 -->
            <div id="home-page" class="content-page active">
                <div class="search-box">
                    <input type="text" placeholder="搜索商品" id="search-input">
                    <button id="search-btn"><i class="fas fa-search"></i></button>
                </div>
                
                <section class="banner">
                    <div class="banner-slide active">
                        <img src="./image/广告1.jpeg" alt="促销广告">
                    </div>
                </section>
                
                <section class="categories">
                    <h2 class="section-title">商品分类</h2>
                    <div class="category-grid">
                        <div class="category-item">
                            <img src="./image/电子产品.png" alt="电子产品">
                            <span>电子产品</span>
                        </div>
                        <div class="category-item">
                            <img src="./image/衣服,服装.png" alt="服装">
                            <span>服装</span>
                        </div>
                        <div class="category-item">
                            <img src="./image/食品.png" alt="食品">
                            <span>食品</span>
                        </div>
                        <div class="category-item">
                            <img src="./image/家居家纺.png" alt="家居">
                            <span>家居</span>
                        </div>
                    </div>
                </section>
                
                <section class="featured-products">
                    <h2 class="section-title">热门商品</h2>
                    <div class="products-grid" id="featured-products">
                        <!-- 商品将通过JS动态加载 -->
                    </div>
                </section>
            </div>

            <!-- 商品列表页 -->
            <div id="products-page" class="content-page">
                <div class="products-header">
                    <h2>全部商品</h2>
                    <div class="sort-options">
                        <select id="sort-by">
                            <option value="default">默认排序</option>
                            <option value="price-asc">价格从低到高</option>
                            <option value="price-desc">价格从高到低</option>
                            <option value="sales">销量优先</option>
                        </select>
                    </div>
                </div>
                <div class="products-grid" id="all-products">
                    <!-- 商品将通过JS动态加载 -->
                </div>
            </div>

            <!-- 购物车页面 -->
            <div id="cart-page" class="content-page">
                <h2>我的购物车</h2>
                <div class="cart-items" id="cart-items">
                    <!-- 购物车商品将通过JS动态加载 -->
                    <div class="empty-cart" id="empty-cart">
                        <i class="fas fa-shopping-cart"></i>
                        <p>购物车是空的</p>
                        <a href="#" class="btn" data-page="products">去逛逛</a>
                    </div>
                </div>
                
                <div class="cart-summary" id="cart-summary">
                    <div class="summary-row">
                        <span>合计:</span>
                        <span id="cart-total">¥0.00</span>
                    </div>
                    <button id="checkout-btn" class="btn checkout-btn" disabled>去结算</button>
                </div>
            </div>

            <!-- 商品详情页 -->
            <div id="product-detail-page" class="content-page">
                <div class="product-detail">
                    <div class="product-images">
                        <div class="main-image">
                            <img id="product-main-image" src="" alt="商品主图">
                        </div>
                    </div>
                    
                    <div class="product-info">
                        <h1 id="product-name"></h1>
                        <div class="price-section">
                            <span class="current-price" id="product-price"></span>
                            <span class="original-price" id="product-original-price"></span>
                        </div>
                        <div class="sales-info">
                            <span>销量: <span id="product-sales"></span></span>
                            <span>库存: <span id="product-stock"></span></span>
                        </div>
                    </div>
                    
                    <div class="product-actions">
                        <div class="quantity-selector">
                            <button id="decrease-qty">-</button>
                            <input type="number" id="product-quantity" value="1" min="1">
                            <button id="increase-qty">+</button>
                        </div>
                        <button id="add-to-cart-btn" class="btn">加入购物车</button>
                    </div>
                    
                    <div class="product-description">
                        <h3>商品详情</h3>
                        <div id="product-description-content"></div>
                    </div>
                </div>
            </div>

            <!-- 我的页面 -->
            <div id="profile-page" class="content-page">
                <div class="profile-header">
                    <img src="./image/头像 女孩.png" alt="用户头像" class="user-avatar">
                    <h3 id="profile-username"></h3>
                    <p id="profile-email"></p>
                </div>
                <ul class="profile-menu">
                    <li><a href="#" class="profile-menu-item" data-page="cart"><i class="fas fa-shopping-cart"></i> 购物车</a></li>
                    <li><a href="#" class="profile-menu-item" data-page="orders"><i class="fas fa-clipboard-list"></i> 历史订单</a></li>
                    <li><a href="#" class="profile-menu-item"><i class="fas fa-headset"></i> 联系客服</a></li>
                    <li><a href="#" id="profile-logout-btn" class="profile-menu-item"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li>
                </ul>
            </div>
        </main>

        <!-- 底部导航 -->
        <footer class="app-footer">
            <a href="#" class="footer-item active" data-page="home">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="#" class="footer-item" data-page="products">
                <i class="fas fa-shopping-bag"></i>
                <span>商品</span>
            </a>
            <a href="#" class="footer-item" data-page="cart">
                <i class="fas fa-shopping-cart"></i>
                <span>购物车</span>
            </a>
            <a href="#" class="footer-item" data-page="profile">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
        </footer>
    </div>

    <script src="script.js"></script>
</body>
</html>